<template>
	<view style="width: 100%;height: 100%;">
		<cu-custom :isFromOutside="isFromOutSide" :isBack="true" leftIcon="edit" :showLeftIcon="false" @leftBtnClick="jumpToPublish" :middleIcon="middelIcon" @middleIconClick="showAnnouncement">
			<block slot="backText">{{isFromOutSide?'首页':'返回'}}</block>
			<block slot="content">
				<text class="text-df text-white">{{forumName}}</text>
			</block>
		</cu-custom>
		<view v-if="activityList.length>0" :style="'width: 100%;height: '+activityHeight+'px;'">
			<swiper class="header-bg" :circular="true" :autoplay="true" indicator-color="#FFFFFF" indicator-active-color="#8799a3" :indicator-dots="true">
				<swiper-item v-for="(item,index) in activityList" :key="index" item-id="index">
					<image @tap="jumpToActivity(item)" :src="item.image" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex justify-between align-center bg-white solid-bottom" style="width: 100%;">
			<scroll-view style="width: 100%;" scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in navItems" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			<!-- <view class="padding-right justify-center flex align-center bg-white">
				<button @tap="switchSubscribeAction" :class="'cu-btn sm radius bg-'+[forum&&forum.is_subscribe?'gray':'red']" style="min-width: 130upx;">{{forum&&forum.is_subscribe?'已订阅':'订阅'}}</button>
			</view> -->
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
		<view v-for="(item,index) in dataList" :key="index" style="width: 100%;">
			<view v-if="sortMenu.showType==2">
				<post-item @clickTopic="clickTopicAction(item)" v-if="item.show_type==1||item.show_type==4" :showImage="item.show_type!==4"
					@click="jumpDetail(item)" :post="item" :isLast="index===dataList.length-1"></post-item>
				<post-item-title @clickTopic="clickTopicAction(item)" v-else-if="item.show_type==3" @click="jumpDetail(item)" :post="item"
					:isLast="index===dataList.length-1"></post-item-title>
				<post-item-image @clickTopic="clickTopicAction(item)" v-else-if="item.show_type==5||item.show_type==6" :showSummary="item.show_type==6"
					@click="jumpDetail(item)" :post="item" :isLast="index===dataList.length-1"></post-item-image>
			</view>
			<view v-else>
				<view v-if="sortMenu.showType==1">
					<post-item @clickTopic="clickTopicAction(item)" @click="jumpDetail(item)" :post="item" :isLast="index===dataList.length-1">
					</post-item>
				</view>
				<view v-else-if="sortMenu.showType==3">
					<post-item-title @clickTopic="clickTopicAction(item)" @click="jumpDetail(item)" :post="item" :isLast="index===dataList.length-1">
					</post-item-title>
				</view>
				<view v-else-if="sortMenu.showType==4">
					<post-item @clickTopic="clickTopicAction(item)" :showImage="false" @click="jumpDetail(item)" :post="item"
						:isLast="index===dataList.length-1"></post-item>
				</view>
				<view v-else-if="sortMenu.showType==5">
					<post-item-image @clickTopic="clickTopicAction(item)" :showSummary="false" @click="jumpDetail(item)" :post="item"
						:isLast="index===dataList.length-1"></post-item-image>
				</view>
				<view v-else-if="sortMenu.showType==6">
					<post-item-image @clickTopic="clickTopicAction(item)" :showSummary="true" @click="jumpDetail(item)" :post="item"
						:isLast="index===dataList.length-1"></post-item-image>
				</view>
			</view>
		</view>
		</mescroll-body>
		<float-tabbar ref="floatBar" :leftTitle="forum.is_subscribe==1?'已订阅':'订阅'" :showLeftIcon="forum.is_subscribe==0" @leftClick="switchSubscribeAction" @middleClick="jumpToPublish" :needAction="floatBarNeedAction" class="float-bar"></float-tabbar>
		<view class="cu-modal" :class="modalStatus">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">版块公告</view>
					<view class="action" @tap="modalStatus=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl flex justify-start" style="flex-direction: column;">
					<view class="flex justify-center align-center">
						<text class="text-df padding-left padding-bottom padding-right">
							{{forum.announcement}}
						</text>
					</view>
					<view class="action flex justify-center padding bg-white" style="width: 100%;">
						<button @tap="doneAction" class="cu-btn round bg-blue" style="width: 70%;">知道了</button>
					</view>
				</view>
			</view>
		</view>
		<tui-actionsheet :show="sortMenu.showActionSheet" :tips="sortMenu.tips" :item-list="sortMenu.itemList"
			:mask-closable="sortMenu.maskClosable" :color="sortMenu.color" :size="sortMenu.size"
			:is-cancel="sortMenu.isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
		<tabbar :tabCur="1"></tabbar>
	</view>
</template>

<script>
	import PostItem from '@/components/post-item.vue';
	import PostItemTitle from '@/components/post-item-title.vue';
	import PostItemImage from '@/components/post-item-image.vue';
	import FloatTabbar from '@/components/float-tabbar.vue';
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import {
		getHomeListMode
	} from '@/api/statusCache.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getPostListBySubscribeForumId,
		getForumDetail,
		getIndexActivityList,
		subscribe,
		unsubscribe,
	} from '@/api/api.js';
	import config from '@/api/config.js'
	import {
		isLogin,
		getUserInfo
	} from '@/api/auth.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			PostItem,
			PostItemTitle,
			PostItemImage,
			FloatTabbar
		},
		onPageScroll(res) {
			if(res.scrollTop <= 0) {
				this.$refs.floatBar.showTabbar()
				return
			}
			let scrollTop = this.lastSrollTop
			if(res.scrollTop > scrollTop) {
				this.$refs.floatBar.hiddenTabbar()
			}else{
				this.$refs.floatBar.showTabbar()
			}
			this.lastSrollTop = res.scrollTop
		},
		data() {
			return {
				floatBarNeedAction:true,
				lastSrollTop:0,
				isFromOutSide:false,
				activityList:[],
				navItems:[
					'最新',
					'热门'
				],
				TabCur: 0,
				scrollLeft: 0,
				modalStatus:null,
				forum:null,
				forumName:'',
				forumId:null,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				windowScale: 0,
				windowHeight: 0,
				windowWidth:320,
				sortMenu: {
					showType: 2,
					showActionSheet: false,
					maskClosable: true,
					itemList: [{
							text: "标准模式",
							color: "#2B2B2B"
						},
						{
							text: "自动调节",
							color: "#2B2B2B"
						}, {
							text: "纯标题",
							color: "#2B2B2B"
						}, {
							text: "标题概要",
							color: "#2B2B2B"
						}, {
							text: "图享模式",
							color: "#2B2B2B"
						}, {
							text: "图文模式",
							color: "#2B2B2B"
						}
					],
					color: "#9a9a9a",
					size: 26,
					isCancel: true
				},
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		computed: {
			activityHeight() 
			{
				return this.windowWidth * 0.3
			},
			middelIcon() 
			{
				if(this.forum == null ) {
					return null
				}
				if(this.forum.announcement&&this.forum.announcement.length>0) {
					return 'info'
				}
				return null
			},
			showPublishIcon() {
				//检验用户是否有发帖权限
				let userInfo = getUserInfo()
				if(userInfo == null) {
					return false
				}
				if(userInfo.role_id > 0) {
					return true
				} 
				if(this.forum && this.forum.can_post_user_group && this.forum.can_post_user_group.length > 0 && userInfo.role_id < 1) {
					let groupIds = this.forum.can_post_user_group.split(';') 
					if(groupIds.indexOf(userInfo.group_id) == -1) {
						return false
					}
				}
				return true
			}
		},
		onLoad(options) {
			let scene = uni.getStorageSync('AppLaunchFromTimeline')
			if (scene !== null && scene !== undefined && scene !== "") {
				this.isFromOutSide = true
			}
			if(options.forumId !== null && options.forumId !== undefined) {
				this.forumId = options.forumId
				this.getActivityList()
				this.initForumInfo()
				if(options.outside !== null && options.outside !== undefined) {
					this.isFromOutSide = true
				}
			}
			if(options.forumName !== null && options.forumName !== undefined) {
				this.forumName = options.forumName
			}
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.windowScale = res.pixelRatio
					_this.windowHeight = res.windowHeight
					_this.windowWidth = res.windowWidth
				}
			})
		},
		methods: {
			onShareAppMessage(res) {
				if(this.forum == null) {
					return {
						title: config.indexShareTitle,
						path: '/pages/index/index'
					}
				}
				return {
					title: '来'+config.appName+'看《'+this.forum.name+'》版块的精彩内容',
					path: '/pages/lessuse/forum-post-list/forum-post-list?outside=1&forumId='+this.forum.forum_id
				}
			},
			onShareTimeline(res) {
				if(this.forum == null) {
					return {
						title: config.indexShareTitle,
						path: '/pages/index/index'
					}
				}
				return {
					title: '来'+config.appName+'看《'+this.forum.name+'》版块的精彩内容',
					path: '/pages/lessuse/forum-post-list/forum-post-list?outside=1&forumId='+this.forum.forum_id
				}
			},
			switchSubscribeAction() 
			{
				if(isLogin() == false) {
					checkLogin() 
					return
				}
				if(this.forum.is_subscribe) {
					unsubscribe(this.forumId).then(res=>{
						uni.$emit('SubscribeForumChanged')
						uni.showToast({
							icon:'none',
							title:'已取消'
						})
						this.forum.is_subscribe = 0
					}).catch(error=>{
						
					})
				}else{
					subscribe(this.forumId).then(res=>{
						uni.$emit('SubscribeForumChanged')
						uni.showToast({
							icon:'none',
							title:'已订阅'
						})
						this.forum.is_subscribe = 1
					}).catch(error=>{
						
					})
				}
			},
			jumpToActivity(activity)
			{
				if(activity.jump_path && activity.jump_path.length > 0) {
					uni.navigateTo({
						url:activity.jump_path
					})
					return
				}
			},
			getActivityList() 
			{
				getIndexActivityList(1,this.forumId).then(res=>{
					this.activityList = res.data
				}).catch(error=>{
					
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if(this.mescroll) {
					this.mescroll.triggerDownScroll()
				}
			},
			clickTopicAction(item) {
				console.log('topic is ' + item.topic.title);
				uni.navigateTo({
					url: '/pages/always/topic-post-list/topic-post-list?topicId='+item.topic.topic_id,
					success: function(res) {
						res.eventChannel.emit('topicPostList', item.topic)
					}
				})
			},
			showAnnouncement() 
			{
				this.modalStatus = 'show'
			},
			doneAction() 
			{
				this.modalStatus = null
			},
			initForumInfo() 
			{
				getForumDetail(this.forumId).then(res=>{
					this.forum = res.data
				}).catch(error=>{
					
				})
			},
			jumpToPublish() 
			{
				if(isLogin() == false) {
					checkLogin()
					return
				}
				
				let forum = {
					'name':this.forumName,
					'forum_id':this.forumId
				}
				uni.navigateTo({
					url:'/pages/publish/publish?fromForum=1',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('forumPostPublish', forum)
					}
				})
			},
			getRandomNum(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				let rand = (Min + Math.round(Rand * Range));
				return rand
			},
			adjustShowType(post) {
				if (post.link && post.link.indexOf('.mp4') !== -1) {
					return 1
				}
				if (post.image_list == null || post.image_list.length == 0) {
					if (post.summary.length < 15) {
						if(post.topic_id>0) {
							return 1
						}
						return 3
					}
					return 4
				}
				if (post.image_list.length == 1) {
					return 1
				}
				//图片
				if (post.summary == null || post.summary.length < 15) {
					if(post.topic_id>0) {
						return 1
					}
					let canTypes = [5, 6]
					let randomType = this.getRandomNum(0, 1);
					return canTypes[randomType]
				}
				if (post.image_list.length == 2) {
					let canTypes = [1, 5]
					if (post.comment_count < 10) {
						let randomType = this.getRandomNum(0, 1);
						return canTypes[randomType]
					}
					canTypes = [5, 6]
					let randomType = this.getRandomNum(0, 1);
					return canTypes[randomType]
				}
				if (post.image_list.length > 2) {
					let canTypes = [5, 6]
					let randomType = this.getRandomNum(0, 1);
					return canTypes[randomType]
				}
				return 1
			},
			jumpDetail(post) {
				console.log(post)
				uni.navigateTo({
					url: '/pages/detail/detail?postId=' + post.post_id
				})
			},
			getDataList(pageIndex, pageSize) {
				this.floatBarNeedAction = false
				let type = this.TabCur == 0? 1:0
				getPostListBySubscribeForumId(this.forumId, pageIndex, pageSize, type).then(res=>{
					let index = 0
					res.data.list.forEach(item => {
						//最多显示三张图片
						if(item.image_list && item.image_list.length > 3) 
						{
							item.image_list = item.image_list.slice(0,3)
						}
						item.show_type = this.adjustShowType(item)
						index++
						if (item.image_list && item.image_list.length > 0) {
							item.icon = 'pic'
						}
						item.show_time = getTimeDistance(item.created_at)
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList);
					}
					console.log('page length:' + pageList.length)
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(pageList.length, hasNext);
					}
					this.floatBarNeedAction = true
				}).catch(error=>{
					if(this.mescroll) {
						this.mescroll.endErr()
					}
					this.floatBarNeedAction = true
				})
			},
			downCallback() {
				this.getActivityList()
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.lastReportId = null
				this.getDataList(pageIndex, page.size)
			},
		},
	}
</script>

<style scoped>
	.float-bar {
		position: fixed;
		width: 100%;
		bottom: 50upx;
		z-index: 1024;
	}
.header-bg {
		width: 100%;
		height: 100%;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>
